<template lang="html">
  <div class="">
    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							科技
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							国际
						</a>
					</div>
				</div>
			</div>
      <ul class="photo-list">
        <router-link tag="li" :to="'/home/photoInfo/'+resData" v-for="item in list">
          <img v-lazy="item.url">
        </router-link>
      </ul>
      <!-- 加载更多 -->
      <mt-button class="btn" type="primary" size="large" @click="loadmore">加载更多</mt-button>
  </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min'

export default {
  data(){
    return{
      list: [],
      resData: [],
      pageIndex: 10
    }
  },
  mounted() {
    mui('.mui-scroll-wrapper').scroll({
      decelereation: 0.0005
    })
  },
  created(){
    this.getData()
  },
  methods: {
    getData(){
      this.$http.get('https://www.apiopen.top/meituApi?page='+this.pageIndex).then(result => {
        this.resData = result.data.data
        this.list = this.list.concat(this.resData)
      })
    },
    loadmore(){
      this.pageIndex++
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    touch-action: pan-y;
  }
  .photo-list{
    list-style: none;
    margin: 0;
    padding: 10px;
    li {
      background-color: #ccc;
      text-align: center;
      margin-bottom: 10px;
      img {
        width: 100%;
        vertical-align: middle;
      }
      img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
      }
    }
  }


  .btn{
    margin-bottom: 20px;
  }
</style>
